<template>
  <div class="copyright-box" ref="scrollIntoView" :class="{ 'copyright-box-loop': route.meta.loopType }">
    <div class="title">
      <titles title="文创商品" />
    </div>
    <t-row :gutter="20" style="margin-top: 16px" v-if="list.length > 0">
      <t-col :span="6" v-for="item in list" :key="item.id">
        <div class="item-box" @click="pathLink(item.url)">
          <img
            class="item-img"
            v-if="!item.coverUrl"
            src="http://101.34.143.36:8890/api/image/387939155165253"
            alt=""
          />
          <img
            class="item-img"
            v-else
            :src="$filters.getLinkUrl(item.coverUrl + '?imageView2/1/h/116/format/webp')"
            alt=""
          />
          <div class="item-content">
            <p class="item-title1">{{ item.name }}</p>
            <div class="item-btm">
              <span class="item-title2" v-if="item.price"
                ><span style="font-size: 14px">￥</span>
                <span>{{ item.price }}</span>
              </span>
              <span class="item-title3" v-if="item.price">参考价</span>
              <span v-else class="noMorePrice">暂无价格</span>
            </div>
          </div>
        </div>
      </t-col>
    </t-row>
    <div v-else class="noMore">暂无文创商品</div>
    <!-- <t-row style="margin-top: 26px">
      <t-col
        :span="12"
        :class="{
          't-pagination0': store.styleInfo.themeColor == '#CFBDA8',
          't-pagination1': store.styleInfo.themeColor == '#8F9EBF',
          't-pagination2': store.styleInfo.themeColor == '#B9463F',
          't-pagination3': store.styleInfo.themeColor == '#343029',
          't-pagination4': store.styleInfo.themeColor == '#171719',
        }"
      >
        <t-pagination
          v-model="parmas.pageNo"
          v-model:pageSize="parmas.pageSize"
          :total="total"
          :showPageSize="false"
          show-jumper
          @change="onChange"
          @page-size-change="onPageSizeChange"
          @current-change="onCurrentChange"
        />
      </t-col>
    </t-row> -->
  </div>
  <NavVue :flag="true" @top="top"></NavVue>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'templateCommodityLoopWap',
});
</script>
<script setup lang="ts">
// @ts-nocheck
import titles from '@/wap/wapPage/wapComponents/title/title.vue';
import NavVue from './wapComponents/nav.vue';
import { urls } from '@/utils/request/upload';
import { goodsList } from '@/api/goods/goods';
import { ref, reactive } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { useProjectStore } from '@/store';
import { useRoute } from 'vue-router';
const scrollIntoView = ref(null);
const store = useProjectStore();
const route = useRoute();
const current = ref(1);
const pageSize = ref(20);
const parmas = reactive({
  value: '',
  pageNo: 1,
  pageSize: 80000,
});
const list = ref([]);
const total = ref(0);
const loading = ref(false);

const init = async () => {
  try {
    if (loading.value) {
      return;
    }
    loading.value = true;
    let res = await goodsList(localStorage.getItem('projectId'), parmas);
    total.value = res.data.total;
    list.value = res.data.data;
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
init();
const onPageSizeChange = (size) => {
  init();
  // console.log('page-size:', size);
  // MessagePlugin.success(`pageSize变化为${size}`);
};

const onCurrentChange = (index, pageInfo) => {
  init();
  // MessagePlugin.success(`转到第${index}页`);
  // console.log(pageInfo);
};

const onChange = (pageInfo) => {
  console.log(pageInfo);
};
const pathLink = (url: string) => {
  console.log(url);
  if (url) {
    window.open(url, '_blank');
  }
};
const top = () => {
  if (scrollIntoView) {
    scrollIntoView.value.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
};
</script>

<style lang="less" scoped>
.copyright-box {
  width: 100%;
  margin: 0 auto;
  padding: 24px 16px;
  // height: calc(100vh - 28px);
  // overflow: auto;
  min-height: calc(100vh - 28px);
}
.copyright-box-loop {
  // min-height: calc(@screen-hw-div-parent-btn-loop - 138px);
}
.item-box {
  width: 100%;
  // height: 176px;
  // min-height: 316px;
  background: #ffffff;
  // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
}
.item-img {
  width: 100%;
  height: 116px;
  display: block;
  object-fit: cover;
  // border-radius: 4px;
  // background: #666;
}
.t-col {
  margin-bottom: 24px;
}
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}
.item-title1 {
  font-size: 15px;
  font-weight: 500;
  color: #333333;
  line-height: 28px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden; //溢出内容隐藏
  text-overflow: ellipsis; //文本溢出部分用省略号表示
  display: -webkit-box; //特别显示模式
  -webkit-line-clamp: 1; //行数
  line-clamp: 1;
  -webkit-box-orient: vertical; //盒子中内容竖直排列
  // line-height: 28px;
  // height: 28px;
}
.item-btm {
  display: flex;
  align-items: center;
}
.item-title2 {
  font-size: 18px;
  font-family: DIN-Medium, DIN;
  font-weight: 500;
  color: #333333;
  // line-height: 34px;
}
.item-title3 {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 12px;
  margin-left: 6px;
}
.item-content {
  width: 100%;
  padding: 7px 8px;
}
.noMorePrice {
  font-size: 16px !important;
}
.noMore {
  text-align: center;
  margin-top: 180px;
  font-size: 20px;
}
</style>
